<template>
  <div class="header">
      <div class="header-return" @click="getHome">
          <span class="boder-return"></span>
          <span class="return iconfont">&#xe641;</span>
      </div>

       <div class="header-top" v-show="headerTagg" :style="topOpacity">
            <div class="header-left" @click="getHome">
                <span class="iconfont">
                &#xe641;
                </span>
            </div>
            上海海昌海洋公园
        </div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            headerTagg:false,
            topOpacity:{
              opacity :0
            }
        }
    },
    methods:{
        getHome(){
            this.$router.push("/")
        }
    },
    mounted() {
      var This=this
        window.addEventListener("scroll",function(){
              let top=document.documentElement.scrollTop
              // console.log(top)
              if(top>60){
                 var Opacity=top/300
                 console.log(Opacity)
                  This.headerTagg=true
                  Opacity<1 ? Opacity : Opacity=1;
                  This.topOpacity.opacity=Opacity
              }
              else{
                This.headerTagg=false
              }
        })
    }


}
</script>

<style scoped lang="stylus">
.header-return{
   position: absolute;
   top: .1rem;
   left: .1rem;
   width: .72rem;
   height: .72rem;

}
.boder-return{
     width: .72rem;
     height: .72rem;
     border-radius: .36rem;
     background: #000;
     display: block;
     opacity: .5;
}
.return{
    position:absolute;
    color: #fff;
    top:0px;
    text-align: center;
    width: .72rem;
    line-height: .72rem;
}

@import "~@/assets/css/var.styl";
  .header-top{
    width: 100%;
    height: .88rem;
    line-height: .88rem;
    background:$bgColor;
    color: $textColor;
    font-size: .36rem;
    text-align:center;
    position:fixed;
    top:0px;
    z-index:1;



  }
  .header-left{
    width: .4rem;
    padding: 0 .2rem;
    text-align: center;
    font-weight: bold;
    position:absolute
  }
</style>
